<template>
  <div class="app-container">
    <h1>App2 组件</h1>
    <!-- <a href="#/home">首页</a> -->
    <router-link to="/home">首页</router-link>
    <!-- <a href="#/movie">电影</a> -->
    <router-link to="/movie/1">洛基</router-link>
    <!-- 注意1:在hash地址中，/ 后面的参数项，叫 路径参数 -->
    <!-- 在路由“参数对象（this.$route）”中,需要使用 this.$route.params来访问路径参数 -->
    <!-- 注意2:在hash地址中，？后面的参数项，叫做 “查询参数” -->
    <!-- 在路由“参数对象”中，需要使用this.$route.query来访问查询参数-->

    <!-- 注意3: 在 this.$route中，path只是部分路径；fullPath 是完整的地址 -->
    <!-- 例如 -->
    <!-- /movie/2?name=zs&age=20 是fullpath的值 -->
    <!-- /movie/2 是path的值 -->
    <router-link to="/movie/2?name=zs&age=20">雷神</router-link>
    <router-link to="/movie/3">复联</router-link>
    <!-- <a href="#/about">关于</a>  -->
    <router-link to="/about">关于</router-link>

    <hr />

    <!-- 只要在项目中安装和配置了vue-router,就可以使用router-view 组件了 -->
    <!-- 作用:占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
};
</script>

<style lang="less" scoped>
.app-container {
  background-color: #efefef;
  overflow: hidden;
  margin: 10px;
  padding: 15px;
  > a {
    margin-right: 10px;
  }
}
</style>
